{% extends "blog/base.html" %}
{% block title %}{{block.super}}{{article.title}}{% endblock %}
{% block css %}{{block.super}}
	<link href="{{APPSTATIC}}css/markdown.css" rel="stylesheet">
	<link href="{{APPSTATIC}}css/article-view.css" rel="stylesheet">
	<link href="{{APPSTATIC}}css/user-box.css" rel="stylesheet">
{% endblock %}
{% block js %}{{block.super}}
	<script src="{{APPSTATIC}}js/marked.min.js"></script>
{% endblock %}
{% block main %}
	<div class="right">
		{% ifnotequal article.author.id handler.user.id %}
		<div class="user-box block">
			<div class="head">
				<a href="{{APPURL}}user?id={{article.author.id}}">
					<img class="avatar" src="{{APPSTATIC}}images/avatar-default.png" alt="{{article.author.nickname}}"/>
					<div class="name">
						<span class="nickname">{{article.author.getname}}</span>
					</div>
				</a>
			</div>
			<div class="anchors">
				<a href="{{APPURL}}user/article?id={{article.author.id}}">
					<span class="num">{{article.author.article_count}}</span>博客
				</a>
				<a href="{{APPURL}}user/follow?id={{article.author.id}}">
					<span class="num">{{article.author.follow_count}}</span>关注
				</a>
				<a href="{{APPURL}}user/fans?id={{article.author.id}}">
					<span class="num">{{article.author.fans_count}}</span>粉丝
				</a>
			</div>
		</div>

		<div class="author-articles block">
			<h3>作者的其他文章 <a href="{{APPURL}}user/article?id={{article.author.id}}" class="more">全部</a></h3>
			<ul>
			{% for item in author_other %}
				<li><a href="?id={{item.id}}">{{item.title}}</a></li>
			{% empty %}
				<div>没有了</div>
			{% endfor %}
			</ul>
		</div>
		{% endifnotequal %}

		<div class="hot-articles block">
			<h3>热门推荐 <a href="{{APPURL}}hot" class="more">全部</a></h3>
			<ul>
			{% for item in hot %}
				<li><a href="?id={{item.id}}">{{item.title}}</a></li>
			{% endfor %}
			</ul>
		</div>
	</div>

	<div class="article block">
		<h1 class="article-title">{{article.title}}</h1>
		<div class="top">
			<div class="nums">
				<i class="icon icon-view"></i> {{article.view_count}}
				<i class="icon icon-comments"></i> {{article.comment_count}}
				<i class="icon icon-time"></i> {{article.update_time|date:"Y-m-d H:i:s"}}
			</div>
			<div class="tags">
				<i class="icon icon-tags"></i>
				{% for tag in article.tagv %}
					<span class="tag">{{tag}}</span>
				{% endfor %}
			</div>
		</div>
		<div id="content"><pre>{{article.content}}</pre></div>
	</div>

	<script> content.innerHTML = marked(content.innerText); </script>

	<div class="block comments">
		{% if handler.user %}
		<form class="comment-box" action="comment" method="post">
			<input type="hidden" name="id" value="{{article.id}}">
			<textarea name="body" placeholder="在这里发表您的看法吧~" required></textarea>
			<div class="comment-btn">
				<button>评论</button>
			</div>
		</form>
		{% else %}
		<p class="hint">要先<a href="{{APPURL}}login?next">登录</a>才能评论~</p>
		{% endif %}

		<h2>精彩评论</h2>

		<ul>
		{% for item in comments %}
			<li class="comment">
				<div class="top">
					<img src="{{APPSTATIC}}images/avatar-default.png" alt="" class="avatar">
					<div class="top-right">
						<a class="nickname" href="{{APPURL}}user/index?id={{item.user.id}}">{{item.user.getname}}</a>
						<span class="time">{{item.time|date:"Y-m-d H:i:s"}}</span>
					</div>
				</div>
				<p class="body">{{item.body}}</p>
			</li>
		{% empty %}
			<p class="hint">还没有评论~</p>
		</ul>
		{% endfor %}
	</div>
{% endblock %}